// Created by carolsail

import { ENUM_AUDIO_CLIP, ENUM_UI_TYPE } from "../Enum";
import { StaticInstance } from './../StaticInstance';
import AudioManager from "../manager/AudioManager";
import BaseLayer from "./Baselayer";
import DataManager from "../manager/DataManager";
import PoolManager from "../manager/PoolManager";
import UIScrollControl from "../plugins/UIScrollControl";
import ResourceManager from "../manager/ResourceManager";
import SdkManager from "../manager/SdkManager";
import ToastManager from "../manager/ToastManager";

const { ccclass, property } = cc._decorator;

@ccclass
export default class SkinLayer extends BaseLayer {

    nodePanel: cc.Node = null
    btnClose: cc.Node = null
    scrollNode: cc.Node = null
    scrollItem: cc.Node = null

    onLoad() {
        this.nodePanel = cc.find('style/panel', this.node)
        this.btnClose = cc.find('btn_close', this.nodePanel)
        this.scrollNode = cc.find('scroll', this.nodePanel)
        this.scrollItem = PoolManager.instance.getNode('SkinItem')
        this.btnClose.on('click', this.onCloseClick, this)
    }

    onDestroy() {
        this.btnClose.off('click', this.onCloseClick, this)
    }

    onEnable() {
        this.zoomIn(this.nodePanel)
        this.rendor()
    }

    rendor() {
        const items = DataManager.instance.bgs
        let isScrollToTop = false
        this.scrollNode.getComponent(UIScrollControl).init(this.scrollItem, items.length, cc.size(350, 300), 1, (node: cc.Node, index: number) => {
            if (!isScrollToTop) {
                isScrollToTop = true
                this.scrollNode.getComponent(cc.ScrollView).scrollToLeft()
            }
            const item = items[index]
            const layout = node.getChildByName('layout')
            const iconNode = layout.getChildByName('icon')
            const btnChoose = layout.getChildByName('btn_choose')
            iconNode.getComponent(cc.Sprite).spriteFrame = ResourceManager.instance.getSprite(`${item.icon}`)
            layout.getChildByName('title').getComponent(cc.Label).string = `${item.title}`
            btnChoose.getChildByName('icon_ad').active = item.isAd
            iconNode.getChildByName('icon_right').active = item.index == DataManager.instance.bgIndex
            if (!btnChoose.hasEventListener('click')) {
                btnChoose.on('click', () => { this.onItemClick(item) }, this)
            } else {
                btnChoose.off('click')
                btnChoose.on('click', () => { this.onItemClick(item) }, this)
            }
        }, (scroll: cc.ScrollView) => {
            scroll.scrollToOffset(cc.v2(350 * DataManager.instance.bgIndex, 0), 0.2)
        })
    }

    onDisable() { }

    onItemClick(item: any) {
        AudioManager.instance.playSound(ENUM_AUDIO_CLIP.CLICK)
        if (item.isAd) {
            SdkManager.instance.showVideoAd(() => {
                DataManager.instance.bgIndex = item.index
                DataManager.instance.save()
                StaticInstance.uiManager.toggle(ENUM_UI_TYPE.SKIN, false)
                StaticInstance.uiManager.toggle(ENUM_UI_TYPE.MENU)
                ToastManager.instance.show('皮肤已更换', { gravity: 'TOP', bg_color: cc.color(102, 202, 28, 255) })
            }, () => {
                ToastManager.instance.show('视频播放中断', { gravity: 'TOP', bg_color: cc.color(226, 69, 109, 255) })
            })
        } else {
            DataManager.instance.bgIndex = item.index
            DataManager.instance.save()
            StaticInstance.uiManager.toggle(ENUM_UI_TYPE.SKIN, false)
            StaticInstance.uiManager.toggle(ENUM_UI_TYPE.MENU)
            ToastManager.instance.show('皮肤已更换', { gravity: 'TOP', bg_color: cc.color(102, 202, 28, 255) })
        }
    }

    onCloseClick() {
        AudioManager.instance.playSound(ENUM_AUDIO_CLIP.CLICK)
        StaticInstance.uiManager.toggle(ENUM_UI_TYPE.SKIN, false)
        StaticInstance.uiManager.toggle(ENUM_UI_TYPE.MENU)
    }
}
